<template>
  <div class="main">
    <el-row :gutter="20">
      <el-col :span="15">
        <div class="grid-content"></div>
      </el-col>
      <el-col :span="9">
        <div class="grid-content" style="float: right">

        </div>
      </el-col>
    </el-row>

    <el-divider></el-divider>

    <el-tabs :tab-position="tabPosition" stretch="true" style="height: 100%;">
      <el-tab-pane label="项目信息">
        <project-info ref="pjinfo"/>
      </el-tab-pane>
      <el-tab-pane label="人员配置">
        <projectPeople ref="pjpeople"/>
      </el-tab-pane>
      <el-tab-pane label="归档文件">角色管理</el-tab-pane>
<!--      <el-tab-pane label="记录">定时任务补偿</el-tab-pane>-->
<!--      <el-tab-pane label="测试">-->
        <!--        <test/>-->
<!--      </el-tab-pane>-->
    </el-tabs>
  </div>
</template>

<script>
import projectInfo from "./components/projectInfo";
import projectPeople from "./components/projectPeople";
import {updaProjectStatus} from "@/api/system/project";
import {removeProjectUser} from "@/api/system/projectSettings";
import {projectDetail, userList, updateHour} from "@/api/system/projectSettings";

export default {
  components: {
    projectPeople,
    projectInfo,

  },
  data() {
    return {
      tabPosition: 'right',
      projectId: 0,
      isStart: true,
      projectProfile: {}

    };
  },
  created() {
    if (this.$route.query.projectId) {
      this.projectId = this.$route.query.projectId;
      console.log(this.projectId);
      this.init();
    } else {
      this.$message.warning("请先选择项目");
      this.$router.push("project");
    }
  },
  methods: {
    init() {
      projectDetail(this.projectId).then(res => {
        console.log(res);
        this.projectProfile = res.data;
        if (this.projectProfile.projectStatus == "not_start") {
          this.isStart = false
        }
      });
    },
    open(state) {
      this.$confirm('此操作无法撤回, 确定否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handlearchive(state)
        this.$message({
          type: 'success',
          message: '设置成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消设置'
        });
      });
    },
    handlearchive(state) {
      console.log(state);
      updaProjectStatus(this.projectId, state).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.init();
          this.$refs.pjinfo.init()
          this.isStart = true
        }
      });
    },

    deleteRow(index, rows, row) {
      rows.splice(index, 1);
      console.log(index, rows, row);
      let userIds = [];
      userIds = row.userId;
      let data = {
        projectId: this.projectId,
        userIds
      };
      removeProjectUser(data).then(res => {
        console.log(res);
      });
    },
    addpeople() {
      // this.$refs.addPeopleForm.centerDialogVisible=true
      this.$refs.addPeopleForm.open();
      this.$refs.addPeopleForm.projectId = this.projectId;
    },

    unique(newarr) {
      let arr = newarr;
      let result = {};
      let finalResult = [];
      for (let i = 0; i < arr.length; i++) {
        //利用对象的键名无法重复的特点，cppostName是唯一区别的属性值
        result[arr[i].postName]
          ? ""
          : (result[arr[i].postName] = true && finalResult.push(arr[i]));
      }
      return finalResult;
    },
    editprojectdetail() {
      this.$refs.editForm.formdata = this.projectProfile;
      this.$refs.editForm.open();
    },
    eaitManHour() {
      this.dialogVisible = true;
    },
    cancel() {
      this.dialogVisible = false;
      this.resetForm("numberValidateForm");
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          this.resetForm("numberValidateForm");
          done();
        })
        .catch(_ => {
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // alert("submit!");
          // console.log(this.hourUnit)
          this.manHour = this.numberValidateForm.manHou;
          let data = {
            manHour: this.numberValidateForm.manHour,
            projectId: this.projectId
          };
          if (this.hourUnit == 0) {
            data.manHour = data.manHour * 8;
          } else if (this.hourUnit == 1) {
            data.manHour = data.manHour * 8 * 22;
          }
          console.log(data);
          updateHour(data).then(res => {
            console.log(res);
            if (res.code == 200) {
              // this.manHour = this.numberValidateForm.manHou;
              this.init();
              this.showCard = 3;
            }
          });
          this.resetForm(formName);
          this.dialogVisible = false;
        } else {
          console.log("error submit!!");
          this.resetForm(formName);
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
    // setarray(arr) {
    //   const map = {};
    //   // 1、把数组元素作为对象的键存起来（这样就算有重复的元素，也会相互替换掉）
    //   arr.forEach(item => (map[JSON.stringify(item)] = item));

    //   // 2、再把对象的值抽成一个数组返回即为不重复的集合
    //   return Object.keys(map).map(key => map[key]);
    // }
  }
};
</script>

<style scoped lang="scss">
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.userImg {
  display: flex;
  justify-content: center;
  align-items: center;

  .demo-image {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    overflow: hidden;

    .block {
      display: flex;
      justify-content: center;
      align-items: center;

      ::v-deep .el-image {
        width: 100px;
        height: 100px;
      }
    }
  }
}
</style>
